import { Modal } from "ant-design-vue"
import { defineComponent, toRefs, unref } from "vue"
import { basicProps } from "../props"
import { useModalDragMove } from "../hooks/useModalDrag"
import { useAttrs } from "/@/hooks/core/useAttrs"
import { extendSlots } from "/@/utils/helper/tsxHelper"
import { useDesign } from "/@/hooks/web/useDesign"

export default defineComponent({
  name: "Modal",
  inheritAttrs: false,
  props: basicProps,
  emits: ["cancel"],
  setup(props, { slots, emit }) {
    const { open, draggable, destroyOnClose } = toRefs(props)
    const attrs = useAttrs()
    useModalDragMove({
      open,
      destroyOnClose,
      draggable,
    })
    const onCancel = (e: Event) => {
      emit("cancel", e)
    }
    const { prefixCls } = useDesign("basic-modal")
    return () => {
      const propsData = { class: prefixCls, ...unref(attrs), ...props } as Recordable
      return <Modal {...propsData}>{extendSlots(slots)}</Modal>
    }
  },
})
